<template>
  <div class="stockDetails">

    <el-card class="box-card">
      <h4 class="textItem">
        客户信息
        <el-button class="backBtn" @click="backBtn" type="primary" size="mini">返回</el-button>
      </h4>
      <div class="info-item">
        <div>
          <span class="tipText">客户ID : </span><span>{{costomer.customerName}}</span>
        </div>
        <div>
          <span class="tipText">所属公司 : </span><span>{{!!costomer.companyName ? costomer.companyName : '-' }}</span>
        </div>
      </div>
      <div class="info-item">
        <div>
          <span class="tipText">行业 : </span><span>{{costomer.industryName}}</span>
        </div>
        <div>
          <span class="tipText">号码归属地 : </span>
          <span>{{costomer.provinceName + ( !costomer.cityName || costomer.cityName === '' ? '' :  '/' + costomer.cityName )}}</span>
        </div>
      </div>
      <div class="info-item">
        <div>
          <span class="tipText">当前虚拟号 : </span><span>{{costomer.virtualNumber}}</span>
        </div>
        <div>
          <span class="tipText">有效时间 : </span><span>{{costomer.lifeTime}}</span>
        </div>
        <div>
          <span class="tipText">导入时间 : </span><span>{{costomer.insertTime}}</span>
        </div>
      </div>
      <div class="info-item">
        <div>
          <span class="tipText">关键词 : </span>
          <span v-if="!!costomer.word">
            <el-tag style="margin-right:5px" v-for=" (item ,index) in costomer.word" :key="index"
                    :type="indexColor(index)">
              {{item}}
            </el-tag>
          </span>
          <el-tag v-else>暂无</el-tag>
        </div>
      </div>
      <div class="info-item">
        <div>
          <span class="tipText">系统标签 : </span>
          <span v-if="!!costomer.label">
            <el-tag style="margin-right:5px" v-for="(item ,index) in costomer.label" :key="index"
                    :type="indexColor(index)">
              {{item}}
            </el-tag>
          </span>
          <el-tag v-else>暂无</el-tag>
        </div>
      </div>
    </el-card>
    <h4>呼叫历史</h4>
    <el-table empty-text="暂无任何用户信息" :data="list" v-loading.body="listLoading" border fit>
      <el-table-column align="center" label="呼叫客服">
        <template slot-scope="scope">
          <span>{{scope.row.serviceName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="属性">
        <template slot-scope="scope">
          <span>{{ scope.row.roleId | roleMap(scope.row.roleId) }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80" align="center" label="拨打结果">
        <template slot-scope="scope">
          <span>{{scope.row.callResult}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="客服标签">
        <template slot-scope="scope">
          <el-tag :title="item" style="margin:3px" :key="index" v-for="(item,index) in scope.row.label.split(',')"
                  type="success">
            {{item}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="关键信息">
        <template slot-scope="scope" style="text-align:left">
          <p v-if='!scope.row.keyInfo'>-</p>
          <div v-else>
            <p v-for=" tmp in scope.row.keyInfo.split('$') ">
              {{tmp}}
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="呼叫备注">
        <template slot-scope="scope">
          <span>{{!!scope.row.remarks ? scope.row.remarks : '-'}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220" align="center" label="拨打时间">
        <template slot-scope="scope">
          <span>{{ scope.row.callTime ? scope.row.callTime.split('.')[0] : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120" align="center" label="操作">
        <template slot-scope="scope">
          <el-button  @click="openCallDialog(scope.row,scope)"  type="success" size="small" >录音详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" prev-text="上一页" next-text="下一页"
                     @current-change="handleCurrentChange" :current-page.sync="listQuery.current"
                     :page-sizes="[10,20,30,50]" :page-size="listQuery.pagesize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog width="400px"
               class="audioDialog"
               title="语音详情"
               :visible.sync="callVisible"
               @close="cancleAudioDialog"
    >
      <VueAudio
        ref="audioes"
        :theUrl="audioUrl"
        :theControlList="'noVolume noMute'"
      />
    </el-dialog>
  </div>

</template>

<script>
import { getCallList } from "@/api/dataStock";
import VueAudio from "@/components/Audio";
// import { pushUpdate} from '@/api/datapush' ;
export default {
  name: "datapushdetail",
  data() {
    const isPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号码"));
      } else if (value.length != 11) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      currentDetail:null,
      callVisible: false,
      itemRowData: {},
      callVisible: false,
      costomer: {},
      formLabelWidth: "120px",
      listLoading: false,
      listQuery: {
        current: 1,
        pagesize: 10,
        customerId: ""
      },
      rulesCall: {
        phone: [{ validator: isPhone, trigger: "blur" }]
      },
      list: [],
      total: 0
    };
  },
  created() {
    this.fetchData();
  },
  components: {
    VueAudio
  },
  computed: {
    audioUrl() {
      return this.currentDetail ? this.currentDetail.voice : '';
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route(to, from) {
      if (to.path === "/datapush/detail") {
        this.fetchData();
      }
    }
  },
  methods: {
    fetchData() {
      this.list = [];
      let thisUserInfo = JSON.parse(localStorage.getItem("PUSH_DATA"));
      this.costomer = thisUserInfo;
      this.listQuery.customerId = thisUserInfo.customerId;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      getCallList(this.listQuery)
        .then(response => {
          const temp = response.data;
          this.total = temp.total;
          this.list = temp.info;
          this.list[0]["isFirst"] = true;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
          this.$message.error(res);
        });
    },

    cancledialog() {
      console.log("asdasd");
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    indexColor(index) {
      return ["", "success", "warning", "danger", "info"][
        index > 5 ? index % 5 : index
      ];
    },
    backBtn() {
      window.history.back();
    },
    openCallDialog(rowDetail) {
      this.currentDetail = rowDetail;
      this.callVisible = true;
    },
    cancleAudioDialog() {
      this.$refs.audioes.pausePlay();
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
@import "src/styles/variables.scss";

.stockDetails {
  .isFirst {
    color: $mainBuleColor;
  }
  margin-bottom: 50px;
  .backBtn {
    @include f-right;
  }
  .info-item {
    margin: 25px 0px 15px 50px;
    > div {
      display: inline-block;
      min-width: 280px;
    }
    .tipText {
      display: inline-block;
      margin-right: 10px;
      min-width: 100px;
      text-align: right;
    }
  }
  .box-card {
    margin-bottom: 15px;
  }
  .textItem {
    margin: 10px 0px;
    width: 100%;
  }
}
</style>
